<template>
<view class="flex-col page">
	
 <view class="flex-row justify-center mt-33">

	  <view class="section"></view>
	  <view class="section_2 ml-33"></view>
	  <view class="section_2 ml-33"></view>
	</view>
  <view class="flex-col flex-1 group">
  
	
	
	
    <view class="flex-col mt-31">
      <view class="flex-col justify-start items-center relative">
        <image
          class="image_5"
          src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=d845d5bc2c33a9893a44c0f90a283dc8.png"
        />
        <image
          class="image_6 pos"
          src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=733444ca84ef05a1a32ad52a9ea9f12b.png"
        />
      </view>
      <view class="flex-col section_3 mt-31">
        <text class="self-center text">We Dont Sleep</text>
        <text class="self-stretch text_2">Dizy Bot always available 24/7. Dont worry, we are online on midnight!</text>
         <view class="flex-col justify-start items-center self-center image-wrapper" @click="onImageWrapperClick">
           <image
             class="image_7 blink"
             src="https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=0b33f0f4d3865d0d6e0461fcdb07db52.png" 
           />
         </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
	export default {
	  components: {},
	  props: {},
	  data() {
	    return {};
	  },
	
	 methods: {
	       onImageWrapperClick() {
	         // 跳转到下一个页面，这里需要替换为您想要跳转的页面路径
	         uni.navigateTo({
	           url: '/pages/Onboarding2/Onboarding2' // 请替换为您的页面路径
	         });
	       }
	     }
	};
</script>

<style>
	
	.mt-33 {
	  margin-top: 66rpx;
	}
	.ml-15 {
	  margin-left: 30rpx;
	}
	.section {
	  background-color: #a9a9a966;
	  border-radius: 50%;
	  width: 18rpx;
	  height: 18rpx;
	}
	.section_2 {
	  background-color: #2dcbd0;
	  border-radius: 10rpx;
	  width: 56rpx;
	  height: 18rpx;
	}
 
.mt-31 {
  margin-top: 62rpx;
}
.page {
  background-color: #fafafa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding: 0 50rpx 108rpx;
  overflow-y: auto;
}
.section {
  background-color: #2dcbd0;
  border-radius: 10rpx;
  width: 56rpx;
  height: 18rpx;
}
.section_2 {
  background-color: #a9a9a966;
  border-radius: 50%;
  width: 18rpx;
  height: 18rpx;
}
.image_5 {
  opacity: 0.25;
  filter: blur(140rpx);
  width: 636rpx;
  height: 690rpx;
}
.image_6 {
  width: 550rpx;
  height: 596rpx;
}
.pos {
  position: absolute;
  left: 50%;
  bottom: 37.98rpx;
  transform: translateX(-50%);
}
.section_3 {
  padding: 84rpx 56rpx 60rpx;
  filter: drop-shadow(0rpx 8rpx 120rpx #a9a9a91a);
  background-image: url('https://ide.code.fun/api/image?token=65e956a6eb5b550011331ec7&name=c3b512739861af0aa59e569a12eb90da.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text {
  color: #323438;
  font-size: 48rpx;
  font-family: NunitoSans;
  font-weight: 800;
  line-height: 58rpx;
  text-align: center;
  width: 450rpx;
}
.text_2 {
  margin-top: 36rpx;
  color: #32343899;
  font-size: 32rpx;

  font-family: NunitoSans;
  line-height: 60.8rpx;
  text-align: center;
}
.image-wrapper {
  margin-top: 132rpx;
  padding: 40rpx 0;
  background-color: #2dcbd0;
  box-shadow: 0rpx 20rpx 73.8rpx #2dcbd033;
  border-radius: 50%;
  width: 120rpx;
}
.image_7 {
  width: 49.24rpx;
  height: 40rpx;
}
.blink {
    animation: blink-animation 1s infinite; /* 应用闪烁动画 */
  }
   @keyframes blink-animation {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }
</style>
